<div class="row">
    <div class="col-md-2">
        <img *ngIf="symbol" [src]="'https://s3-eu-west-1.amazonaws.com/product-involvement-images/icn-pi-' + symbol + '_on.png'"/>
    </div>
    <div class="col-md-10">
        <div class="row">
            <input type="checkbox" [(ngModel)]="sreenOnAnyInvolvement" (change)="anyInvolvementCheck()"/>Screen on any involvement
        </div>
        <div class="row">OR set restrictive threshold</div>
    </div>
</div>

<div *ngFor="let category of categories" class="row mb-4">
    <div class="col-md-4 text-right">
        {{ category.categoryOfInvolvement }}
    </div>
    <div class="col-md-8">
        <div *ngIf="!category.revenueRangeYesNo && !category.significantOwnershipYesNo">
            Involvement
            <a href="javascript:;" class="btn btn-sm ml-2" [ngClass]="{'btn-primary-dark': category.isInvolved, 'btn-transparent': !category.isInvolved}" (click)="category.isInvolved = !category.isInvolved; toggleInvolvement()">{{ category.isInvolved ? 'On': 'Off' }}</a>
        </div>

        <div *ngIf="category.revenueRangeYesNo" id="sliderContainer">
            <slider [levels]='filterLevels(levels, category.maxValue)' [selected]="category.selectedValue" [answerCategories]=true (changed)="sliderChanged($event, category)" (click)="sreenOnAnyInvolvement = false"></slider>
        </div>

        <div *ngIf="category.significantOwnershipYesNo">
            <a href="javascript:;" class="btn btn-sm ml-2" [ngClass]="{'btn-primary-dark': category.isSignificantOwnership, 'btn-transparent': !category.isSignificantOwnership}" (click)="category.isSignificantOwnership = !category.isSignificantOwnership; toggleOwnership()">{{ category.isSignificantOwnership ? 'On': 'Off' }}</a>
        </div>
    </div>
</div>

<!-- TODO: check if has any involvement -->
<div *ngIf="categories && hasAnyInvolvement()" class="mt-4">
    <h5>Involvement through:</h5>
    <div *ngFor="let category of categories; let index = index;" class="mb-2">
        <div *ngIf="category.revenueRange.length == 0 && (category.isInvolved || category.isSignificantOwnership)">
            <strong>{{ category.categoryOfInvolvement }}:</strong>
            <span *ngIf="category.isInvolved">Not involved</span><span *ngIf="category.isInvolved && category.isSignificantOwnership"> Or </span>
            <span *ngIf="category.isSignificantOwnership">No Significant Ownership</span>
        </div>
        <div *ngIf="category.revenueRange.length > 0 && (category.isSignificantOwnership || (category.selectedValue != undefined && category.selectedValue > 0))">
            <strong>{{ category.categoryOfInvolvement }}:</strong>
            <span *ngIf="category.selectedValue">{{ category.revenueRange[5 - category.selectedValue].start }}% and above is restricted</span>
            <span *ngIf="category.selectedValue && category.isSignificantOwnership"> Or </span>
            <span *ngIf="category.isSignificantOwnership">Significant Ownership</span>
        </div>
        <div *ngIf="hasMultiple(category, index)">
            Or
        </div>
    </div>
</div>